<template>
  <div class="page-bg">
    <editPage @subForm="subForm" v-loading="loading">
      <formItem name="标题" required>
        <el-input
          placeholder="请输入"
          maxlength="100"
          v-model="formData.title"
          show-word-limit
        />
      </formItem>
      <formItem name="小标题">
        <el-input
          placeholder="请输入"
          maxlength="100"
          v-model="formData.min_title"
          show-word-limit
        />
      </formItem>
      <formItem name="分类" required>
        <selectType v-model="formData.type_id" :type="typeItemTypeName.news" />
      </formItem>

      <formItem name="资讯封面图片">
        <formImg
          width="200"
          height="95"
          v-model="formData.cover"
          @pickImg="pickImg('img', $event)"
        />
      </formItem>
      <formItem name="资讯摘要|简介">
        <el-input
          placeholder="请输入"
          maxlength="255"
          type="textarea"
          :rows="4"
          v-model="formData.abstract"
          show-word-limit
        />
      </formItem>
      <formItem name="seo关键词">
        <el-input
          v-model.trim="formData.keywords"
          type="textarea"
          placeholder="请输入(选填)"
        ></el-input>
      </formItem>
      <formItem name="seo描述">
        <el-input
          v-model.trim="formData.description"
          type="textarea"
          placeholder="请输入(选填)"
        ></el-input>
      </formItem>
      <formItem name="详情" required>
        <editor ref="editorRef" @selectImg="pickImg('editor')" />
      </formItem>
      <formItem name="是否显示资讯">
        <el-switch
          active-value="1"
          inactive-value="0"
          v-model="formData.a_show"
          active-text="显示"
          inactive-text="隐藏"
        >
        </el-switch>
      </formItem>
    </editPage>

    <layerImg v-model="imgOption.show" @getImg="getImg" />
  </div>
</template>

<script setup lang="ts">
import { editPage, formItem, editor } from "@/components/editPage";
import { layerImg, formImg, useImgHook } from "@/components/formImg";
import config from "@/config";
import { ElMessage } from "element-plus";
import { post } from "@/common/http";
import selectType from "@/components/selectType.vue";
import { typeItemTypeName } from "@/common/interface";

const route = useRoute();
const router = useRouter();
const editorRef = ref<any>(null); //富文本
const loading = ref(false);
const queryID = route.query?.id; //页面参数
const formData = ref<any>({
  type: "",
  a_show: "1",
  keywords: "",
  description: "",
});

onMounted(() => {
  if (queryID) {
    //获取编辑详情
    loading.value = true;
    post("api/News/get_detail_a", { id: queryID }).then((res) => {
      formData.value = res.data.details;
      formData.value.cover = res.data.details.cover;

      //编辑器默认值
      editorRef.value.content = res.data.details.content;
      loading.value = false;
    });
  }
});

const { imgOption, pickImg } = useImgHook();

//获取弹窗选择的图片
function getImg(data: any) {
  //单图上传
  if (imgOption.option.name === "img") {
    formData.value.cover = data.imgUrl;
    console.log(formData.value.cover);
  }

  //编辑器图片上传
  if (imgOption.option.name === "editor") {
    //编辑器选择图片
    editorRef.value.editorObj.execCommand(
      "inserthtml",
      `<p><img style='max-width:100%' src='${
        config.serverImg + data.imgUrl
      }'/></p>`
    );
  }
}

//提交
function subForm() {
  let data = toRaw(formData.value);
  if (!data.title) return ElMessage.error("请输入资讯标题");
  if (!data.type_id) return ElMessage.error("请选择资讯类型");
  if (!editorRef.value.content) return ElMessage.error("请输入资讯内容");
  data.content = editorRef.value.content;
  if (queryID) data.id = queryID;
  post("api/news/saveData", data).then((res) => {
    ElMessage.success(res.msg);
    setTimeout(() => {
      router.push("/news/list");
    }, 1000);
  });
}
</script>

<script lang="ts">
export default {
  name: "NewsEdit",
};
</script>

<style lang="scss" scoped></style>
